<!-- 扬尘检测/右侧顶部 -->
<template>
  <div class="rightBottom">
    <checked-title title="案件数量排名">
      <template #right>
        <div
          class="title2 pointer"
          :class="active == item.value ? 'active' : ''"
          @click="tabChange(item.value)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.title }}
        </div>
      </template>
    </checked-title>
    <div class="ranking">
      <div class="ranking_title">
        <li>排名</li>
        <li>小区名称</li>
        <li>案件数量</li>
      </div>
      <div class="ranking_list">
        <ul v-for="(item, index) in dataList" :key="'a' + index">
          <li :style="{ color: index < 3 ? '#FFC300' : '#FF6C1D' }">
            {{ index + 1 }}
          </li>
          <li>{{ item.community }}</li>
          <li>{{ item.total }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getRunState } from '@/api/index'
import { LaoJiuXiaoQuDB } from '@/api'
import { color } from 'highcharts'

export default {
  data() {
    return {
      active: '4',
      tabList: [
        { title: '本日', value: '1' },
        { title: '本周', value: '2' },
        { title: '本月', value: '3' },
        { title: '本年', value: '4' },
      ],

      data: [],
      num: [],
      dataList: [],
    }
  },
  mounted() {
    this.getRankingList()
  },
  methods: {
    tabChange(active) {
      this.active = active
      this.getRankingList('tabChange')
    },
    getRankingList() {
      const data = {
        type: this.active,
      }
      LaoJiuXiaoQuDB.getRankingList(data).then((res) => {
        this.dataList = res.data
      })
    },
  },
}
</script>
<style lang="less" scoped>
.rightBottom {
  width: 100%;
  height: 100%;
  .ranking {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    .ranking_title {
      width: 100%;
      height: 50px;
      background: #173271;
      display: flex;
      li {
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #46ede8;
        text-align: center;
        line-height: 50px;
      }
      li:nth-child(1) {
        flex: 2;
      }
      li:nth-child(2) {
        flex: 5;
      }
      li:nth-child(3) {
        flex: 3;
      }
    }
    .ranking_list {
      max-height: 400px;
      overflow: auto;
      ul {
        display: flex;
        height: 50px;
        li {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cfcfcf;
          line-height: 41px;
          text-align: center;
          line-height: 50px;
        }
        li:nth-child(1) {
          font-size: 19px;
          font-family: DIN;
          font-weight: bold;
          font-style: italic;
          color: #ff6c1d;
          flex: 2;
        }
        li:nth-child(2) {
          flex: 5;
        }
        li:nth-child(3) {
          flex: 3;
        }
        // li:nth-child(2) {
        // }
        // li:nth-child(2) {
        //   color: #CFCFCF;
        //   line-height: 41px;
        // }
      }
    }
  }
}
</style>
